@extends('admin.layouts.main')
@section('header')
    @parent
    <style>
        .quoteBox{
            padding: 5px;
            margin-top: 10px;
        }
    </style>
@endsection
@section('content')
    <blockquote class="layui-elem-quote quoteBox">
        <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm add-btn">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
    </blockquote>
    <div style="height: 100%">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="operTpl">
        <a class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" lay-event="addSub">添加下属角色</a>
        <a class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" lay-event="addAuth">权限设置</a>
        <a class="layui-btn layui-btn-danger layui-btn-radius layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!-- 状态 -->
    @verbatim
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="switch" lay-skin="switch" lay-filter="status"  lay-text="正常|禁用" {{ d.status ? 'checked' : '' }} data-id="{{ d.id }}" />
    </script>
    @endverbatim
@endsection

@section('footer')
    @parent
    <script type="text/javascript">
        layui.config({
            base:'{{ asset('xman/extends') }}/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use([ 'laytpl','treetable','table','form'],function () {
            var laytpl = layui.laytpl,
                table = layui.table,
                form = layui.form,
                treetable = layui.treetable;
            // 渲染表格
            var renderTable = function (){
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,          // 树形图标显示在第几列
                    treeSpid: 0,             // 最上级的父级id
                    treeIdName: 'id',       // id字段的名称
                    treePidName: 'parent_id',     // pid字段的名称
                    treeDefaultClose: true,   // 是否默认折叠
                    treeLinkage: false,        // 父级展开时是否自动展开所有子级
                    elem: '#treeTable',
                    url: '{{ url('admin/role') }}',
                    parentIcon:'layui-icon-layer',
                    childIcon:'',
                    cols: [[
                        {type: 'numbers'},
                        {field: 'id', title: 'ID'},
                        {field: 'name', title: '名称'},
                        {field: 'status', title: '状态',templet:'#statusTpl'},
                        {title:'操作',templet:"#operTpl"}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            };
            renderTable();
            $('.add-btn').click(function () {
                add(0);
            });
            //工具栏监听
            table.on("tool(treeTable)",function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                switch (layEvent){
                    case 'addSub':
                        add(data.id);
                        break;
                    case 'edit':
                        edit(data.id);
                        break;
                    case 'del':
                        changeStatus(data.id,'delete');
                        break;
                    case 'addAuth':
                        openWindow('{{ url('admin/role/menu') }}?id='+data.id,'角色权限设置');
                        break;
                }
            });
            form.on("switch(status)",function (data) {
                var opt = 'forbidden';
                if(data.elem.checked){
                    opt = 'recovery';
                }
                //console.log($(this).attr('data-id'),opt);
                changeStatus($(this).attr('data-id'),opt);
            });
            //添加
            function add(parentId) {
                openWindow('{{ url('admin/role/add') }}?parentId='+parentId,'添加/编辑')
            }
            //编辑
            function edit(id) {
                openWindow('{{ url('admin/role/edit') }}?id='+id,'添加/编辑')
            }
            function changeStatus(id,opt) {
                goGetConfirm('{{ url('admin/role/status') }}',{id:id,opt:opt},'确定该操作?',0);
            }
        })
    </script>
@endsection